<template>
  <div class='goodsinfo-container'>
        <!-- 小球 -->
        <transition 
        @before-enter='beforeEnter'
        @enter='enter'
        @after-enter='afterEnter'
        >
        <div class='ball' v-show='flag' ref='ball'></div>
        </transition>
      <div class="mui-card">
				<div class="mui-card-content">
                    <div class="mui-card-content-inner">
				<swipe :list='lunbotu' :isfull='false'></swipe>
				</div>
                </div>
			</div>
    <div class="mui-card">
      
        
				<div class="mui-card-header">{{goodsInfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>
                            市场价格：<del>￥{{goodsInfo.market_price}}</del>&nbsp;&nbsp;
                            销售价：<span class='red'>￥{{goodsInfo.sell_price}}</span>
                        </p>
                        <!-- 数量组件 --> 
                        <p>
                            购买数量：<numbox :max='goodsInfo.stock_quantity' @getcount='getSelectedcount'></numbox>
                        </p>
                      
                        <p>
                            <mt-button type='primary' size='small'>立即购买</mt-button>
                            <mt-button type='danger' size='small' @click='addshopcar()'>加入购物车</mt-button>
                        </p>
					</div>
				</div>
			
			</div>
    <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					<p>商品货号：{{goodsInfo.goods_no}}</p>
                    <p>库存情况：{{goodsInfo.stock_quantity}}件</p>
                    <p>上架时间：{{goodsInfo.add_time | dataFormat }}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button type='primary' size='large' plain @click='goDesc'>图文介绍</mt-button>
                    <mt-button type='danger' size='large' plain @click='goComment(id)'>商品评论</mt-button>
                </div>
			</div>
  </div>
</template>
<script>
import {Toast} from 'mint-ui';
// 导入轮播图组件
import swipe from '../swipe.vue';
// 导入数字输入框
import goodsinfo_numbox from './goodsinfo_numbox.vue';

    export default{
        data(){
            return {
                goodsInfo:[],
                lunbotu:[],
                id:this.$route.params.id,
                flag:false,
                goodsSelected:1 //默认选中一个商品
            }
        },
        created(){
            this.getInfo();
            this.getLunbo();
        },
        methods:{
           getInfo(){
               this.$http.get('api/goods/getinfo/'+this.id).then(result=>{//异步操作
                   console.log(result.body);
                   if(result.body.status==0){
                       this.goodsInfo=result.body.message[0];
                   }else{
                       Toast('获取失败')
                   }
               })
           },
           getLunbo(){
               this.$http.get('api/getthumimages/'+this.$route.params.id).then(results=>{
                   if(results.body.status==0){
                    //    增加一个img属性
                       results.body.message.forEach(item=>{
                           item.img=item.src;
                       })
                       this.lunbotu=results.body.message;
                       console.log(this.lunbotu)
                   }else{
                       Toast('加载失败')
                   }
               })
           },
           goDesc(){// 点击跳转到图文介绍页
               this.$router.push({name:'goodsdesc',params:{id:this.id}});              
           },
           goComment(id){
               this.$router.push({name:'goodsComment',params:{id}})
           },
           getSelectedcount(n){
               
               this.goodsSelected=n;
               console.log(this.goodsSelected)
           },
           addshopcar(){
               this.flag=!this.flag;
                // 组织一个对象，将选的商品加入购物车
                var goods={
                    cou:this.goodsSelected,
                    id:this.id,                    
                    sell_price:this.goodsInfo.sell_price,
                    selected:true
                }
                // console.log(goods.cou)
                // 把选中的数据放入store数据存储对象中，以便其他组件使用,只能通过mutations中修改
                this.$store.commit('addToCar',goods);               
           },
           beforeEnter(el){
            //    小球进入动画之前         
            el.style.transform='translate(0,0)';
           },
           enter(el,done){
               // 获取小球在页面中的位置
                const ballPosition=this.$refs.ball.getBoundingClientRect();
                // 获取购物车徽标在页面中的位置
              const badgePosition=  document.getElementsByClassName('mui-badge')[0].getBoundingClientRect();
               el.offsetWidth;
            //    小球里徽标的距离
            const x=badgePosition.left-ballPosition.left;
            const y=badgePosition.top-ballPosition.top;
            // console.log(x,y)
            el.style.transform=`translate(${x}px,${y}px)`;
            el.style.transition='all 0.5s ease';
               done()
           },
           afterEnter(el){
              this.flag=!this.flag;
           }
        },
        components:{
            swipe, // 引用子组件
            numbox:goodsinfo_numbox
        }
    }
</script>
<style scoped lang='scss'>
    .goodsinfo-container{
        background-color:#eee;
        overflow:hidden;
    }
    .mui-card-content-inner{
        color:#999;
        .red{
            color:red;
            font-weight: bold;
            font-size:16px;
        }
    }
    .mui-card-footer{
        /* flex-direction:column;
        justify-content:space-between; */
        display: block;
        button{
            margin:15px 0;
        }
    }
    .ball{
        width:15px;
        height: 15px;
        border-radius:50%;
        background-color:red;
        position:absolute;
        left: 146px;
        top:390px;
        z-index:999;
    }
  /*   .mui-card{
        overflow:visible;
    } */
</style>

